<template>
  <div class="message">
    <div class="ul">
      <div class="li">
        <router-link to="/Me1">Me1</router-link>
      </div>
      <div class="li">
        <router-link to="/Me2">Me2</router-link>
      </div>
      <div class="li">
        <router-link to="/Me3">Me3</router-link>
      </div>
      <div class="li">
        <router-link to="/Me4">Me4</router-link>
      </div>
      <div class="li">
        <router-link to="/Me5">Me5</router-link>
      </div>
      <div class="li">
        <router-link to="/Me6">Me6</router-link>
      </div>
    </div>
    <!--显示子路由内容的渲染部分-->
    <router-view></router-view>
  </div>
</template>

<style lang="scss">
  .message {
    .ul {
      width: 100%;
      height: 44px;
      background: paleturquoise;
      text-align: center;
      .li{
        float: left;
        width: 120px;
        font-size: 15px;
      }
      a{
        color: #000;
      }
      .router-link-active{
        color: red;
        border-bottom: 2px solid darkred;
      }
    }
  }
</style>
<script>
  export default {
    name: 'Content',
    data() {
      return {}
    }
  }
</script>

